<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/lib/layui/css/modules/laydate/default/laydate.css"  media="all">
    <link rel="stylesheet" href="/lib/layui/css/modules/layer/default/layer.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-col-xs6 layui-col-md8">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>相关信息</legend>
    </fieldset>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">借阅信息</li>
            <li>借阅本书的人还借过</li>
            <li>收藏本书的人还收藏过</li>
            <li>相关书评</li>
        </ul>
        <div class="layui-tab-content" style="height: 200px;">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-even="" lay-skin="nob">
                    <tr>
                        <td>登录号</td>
                        <td>中图分类号</td>
                        <td>状态</td>
                    </tr>
                    <tr th:each="i:${same}">
                        <td th:text="${i.getId()}"></td>
                        <td th:text="${i.getClassification()}"></td>
                        <td th:text="${i.getBorrown()} == true?'已借出':'可借'"></td>
                    </tr>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" lay-even="" lay-skin="nob">
                    <tr>
                        <td>登录号</td>
                        <td>书名</td>
                        <td>作者</td>
                        <td>出版社</td>
                        <td>出版日期</td>
                        <td>评分</td>
                    </tr>
                    <tr th:each="i:${sameBorrow}">
                        <td th:text="${i.getId()}"></td>
                        <td th:text="${i.getName()}"></td>
                        <td th:text="${i.getAuthor()}"></td>
                        <td th:text="${i.getPublishingHouse()}"></td>
                        <td th:text="${i.getPublishDate()}"></td>
                        <td th:text="${i.getScore()}"></td>
                    </tr>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" lay-even="" lay-skin="nob">
                    <tr>
                        <td>登录号</td>
                        <td>书名</td>
                        <td>作者</td>
                        <td>出版社</td>
                        <td>出版日期</td>
                        <td>评分</td>
                    </tr>
                    <tr th:each="i:${sameStar}">
                        <td th:text="${i.getId()}"></td>
                        <td th:text="${i.getName()}"></td>
                        <td th:text="${i.getAuthor()}"></td>
                        <td th:text="${i.getPublishingHouse()}"></td>
                        <td th:text="${i.getPublishDate()}"></td>
                        <td th:text="${i.getScore()}"></td>
                    </tr>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" lay-even="" lay-skin="nob">
                    <tr>
                        <td>评论人</td>
                        <td>评论内容</td>
                        <td>评分</td>
                    </tr>
                    <tr th:each="i:${comment}">
                        <td th:text="${i.getBorrowerName()}"></td>
                        <td th:text="${i.getContent()}"></td>
                        <td th:text="${i.getScore()}"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>最新借阅信息</legend>
    </fieldset>
    <table class="layui-table" lay-even="" lay-skin="nob">
        <tr>
            <td>登录号</td>
            <td>借阅时间</td>
            <td>归还时间</td>
        </tr>
        <tr th:each="j:${borrow}">
            <td th:text="${j.getBookId()}"></td>
            <td th:text="${j.start}"></td>
            <td th:text="${j.end}"></td>
        </tr>
    </table>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>预约信息</legend>
    </fieldset>
    <table class="layui-table" lay-even="" lay-skin="nob">
        <tr>
            <td>登录号</td>
            <td>预约时间</td>
            <td>预计归还时间</td>
        </tr>
        <tr th:each="k:${order}">
            <td th:text="${k.getBookId()}"></td>
            <td th:text="${k.getStartDate()}"></td>
            <td th:text="${k.getEndDate()}"></td>
        </tr>
    </table>
</div>
<div class="layui-col-xs6 layui-col-md4">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>借阅</legend>
    </fieldset>
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">图书登录号</label>
            <div class="layui-input-block">
                <select name="bookId" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option th:each="a:${same}" th:value="${a.getId()}" th:text="${a.getId()}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-block">
                <input type="text" name="end" id="endB" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="borrow">借阅</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>预约</legend>
    </fieldset>
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">图书登录号</label>
            <div class="layui-input-block">
                <select name="bookId" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option th:each="a:${same}" th:value="${a.getId()}" th:text="${a.getId()}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始日期</label>
            <div class="layui-input-block">
                <input type="text" name="start" id="start" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-block">
                <input type="text" name="end" id="endO" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="order">预约</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form','laydate', 'layer'], function (){
        var laydate = layui.laydate,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
        form.render();
        laydate.render({
            elem: '#start',
            min: 0,
            max: 180
        });
        laydate.render({
            elem: '#endB',
            min: 0,
            max: 30
        });
        laydate.render({
            elem: '#endO',
            min: 0,
            max: 210
        });
        form.on('submit(borrow)', function (data) {
            data = data.field;
            $.ajax({
                url:"/borrow",
                type:"POST",
                data:data,
                success:function (result){
                    if (result.code==200){
                        layer.msg("借阅成功",{
                            icon:6,
                            time:500
                        });
                    }else {
                        layer.open({
                            type: 1
                            ,offset: 'auto'
                            ,id: 'layerDemo' //防止重复弹出
                            ,content: '<div style="padding: 20px 100px;">'+ result.msg +'</div>'
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,shade: 0 //不显示遮罩
                        });
                        //layer.msg(result.msg);
                    }
                }
            });
            return false;
        });
        form.on('submit(order)', function (data) {
            data = data.field;
            $.ajax({
                url:"/order",
                type:"POST",
                data:data,
                success:function (result){
                    if (result.code==200){
                        layer.msg("预约成功",{
                            icon:6,
                            time:500
                        });
                    }else {
                        layer.open({
                            type: 1
                            ,offset: 'auto'
                            ,id: 'layerDemo' //防止重复弹出
                            ,content: '<div style="padding: 20px 100px;">'+ result.msg +'</div>'
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,shade: 0 //不显示遮罩
                        });
                    }
                }
            });
            return false;
        });
        return false;
    })
</script>
</body>
</html>